<template>
    <div>
        <h3>组件通讯</h3>
        <child1 msg="child你该回家吃饭" @back="back" ref="child1Ref"></child1>
        {{replay}}
        <child2 msg='我是爸爸,你要听话啊' from="爸爸" ></child2>
        <button @click="backEat">叫child 回家吃饭</button>
        
    </div>
</template>

<script>
import child1 from "./Child1.vue";
import child2 from "./Child2.vue";
export default {
  provide() {
    return { foo: "barbarbarbarbarbar" };
  },
  data() {
    return {
      replay: ""
    };
  },
  components: {
    child1,
    child2
  },
  methods: {
    back(msg) {
      console.log(msg);
      this.replay = msg;
    },
    backEat() {
      //   this.$children[0].eat();
      //   console.log(this.$children);
      this.$refs.child1Ref.eat();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>